<template>
  <div v-bind="$attrs" class=" tr-toggle-big"  tabindex="-1">
  <LabelPrefixWraper
    v-show="mappingProps.visible"
     :class="['tr-toggle','no-outline', styles.module]"
    :label="mappingProps.label"
    :hideLabel="mappingProps.hideLabel"
    :labelPosition="mappingProps.labelPosition"
    :helpConf="mappingProps.helpConf"
    :helpTooltip="mappingProps.helpTooltip"
    :helpPlacement="mappingProps.helpPlacement"
    :helpMore="mappingProps.helpMore"
    :helpMorePopup="mappingProps.helpMorePopup"
    :helpMoreLink="mappingProps.helpMoreLink"
    :helpMoreLinkHrefStatic="mappingProps.helpMoreLinkHrefStatic"
    :helpMoreLinkHrefExp="mappingProps.helpMoreLinkHrefExp"
  >
  <div class="tr-toggle-div no-outline">
    <Component
      v-bind="{...mergeAttrs}"
      :class="['tr-toggle-small', styles.module]"
      :disable="mappingProps.readonly"
      :label="undefined"
      :size="mappingProps.size"
       v-model:modelValue="mappingProps.modelValue"
      :tabindex="mappingProps.tabIndex ? mappingProps.tabIndex : 1"
    >
    </Component>
    </div>
  </LabelPrefixWraper>
  </div>
</template>

<script>
import Component from '@teld/q-components/Toggle';
import useMappingProps from 't/common/hooks/useMappingProps';
import { commonProps, fixNameSpace } from 't/common/utils';
import { defineComponent, watch } from 'vue';
import LabelPrefixWraper from '../label-prefix-wraper';
import styles from './index.module.scss';
import './index.scss';

  export default defineComponent({
    name: fixNameSpace(Component.name),
    components: { Component, LabelPrefixWraper },
    props: {
      ...commonProps,
      ...Component.props,
      ...LabelPrefixWraper.props,
      readonly: Boolean,
      tabIndex:String,
      size: {
        type: String,
        default() {
          return 'xl';
        },
      },
      modelValue:{
        type: Boolean,
        default() {
          return false;
        },
      },
    },
    emits: ['change','update:modelValue'],
    setup(props, { attrs, emit, expose, slots }) {
       let attrs_ = {...attrs};
      delete attrs_['data-uid'];
      delete attrs_['data-tag'];
      delete attrs_['class'];
      delete attrs_['style'];


      const [mappingProps, mappingExpose] = useMappingProps(props);

      const mergeAttrs = { ...attrs_, ...mappingProps }
      delete mergeAttrs['tabIndex'];
      delete mergeAttrs['tabindex'];

      expose(mappingExpose);
      let flag = false;
     watch(
      () => mappingProps.modelValue,
      (value, oldValue) => {
     if (mappingProps.modelValue == '0'||mappingProps.modelValue == null) {
        mappingProps.modelValue=false;
      }else if (mappingProps.modelValue == '1') {
        mappingProps.modelValue=true;
        }
        emit('update:modelValue', value)
        if (flag == true) {
         emit('change', value)
        }
        flag=true

         },
       { immediate: true },
    );


      return { attrs_, styles, mappingProps,mergeAttrs };
    },
  });
</script>

<style lang="scss" scoped></style>
